<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="2" leftUrl="/pages/my/index" :noLeft="false" showTitle="我的群组" showBackground="#EAECEF">
		</myheader>
		<!-- #endif -->
		<view class="content">
			<view>
				<view v-if="dataList.length==0" class="nodatabox">
					<view style="color:#2E4964;text-align: center;font-size: 16px;margin-top: 20px;">无已创建/加入群组</view>
					<view style="margin-top: 20px;border-radius: 10px;padding: 15px;background-color: white;">
						<view style="color: #2E4964;font-size: 16px;font-weight: 700;">群组服务说明:</view>
						<view style="font-size: 14px;color: #2E4964;font-weight: 350;margin-top: 10px;">
							适宜于家庭备餐、朋友聚餐时，按所有人已订阅的健康膳食方案，提供推荐适宜饮食推荐的服务模式。
						</view>
						<view style="font-size: 14px;color: #2E4964;font-weight: 350;margin-top: 10px;">
							并可根据群成员健康体态档案情况，提供精准适宜饮食推荐服务。
						</view>
						<view style="font-size: 14px;color: #2E4964;font-weight: 350;margin-top: 10px;">
							你可为家庭、或朋友创建专属群组。 也可加入其他人所创建的群组。
						</view>
					</view>
				</view>
				<view v-if="dataList.length>0">
					<view v-for="item in dataList"
						style="display:flex;justify-content: space-evenly;flex-direction: column;align-items: center;  margin-top: 10px;padding: 12px 10px 12px 10px;border-radius: 10px;background-color: white;">
						<view class="top" style="display: flex;align-items: center;width:100%">
							<view
							style="color:#2e4964;font-size:16px;font-weight:700;display: inline-block;max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{item.name}}
						</view>
						<view v-if="item.administrators==1" class="group-right">
							<view class="group-right-item">
								<button :data-id="item.id" open-type="share" class="group-right-item-btn"></button>
								<image src="../../static/yaoqing.svg" class="group-right-item-img"></image>
								<view class="group-right-item-txt">邀请</view>
							</view>
							<view class="group-right-item" @click="goDetail(item.id,item.administrators)">
								<image src="../../static/guanli.svg" class="group-right-item-img"></image>
								<view class="group-right-item-txt">管理</view>
							</view>
						</view>
						<view v-else class="group-right"  @click="goDetail(item.id,item.administrators)">
							<view class="group-right-item">
								<image src="../../static/guanli.svg" class="group-right-item-img"></image>
								<view class="group-right-item-txt">进入</view>
							</view>
						</view>
						</view>
						<view class="bottom" style="position: relative;height: 80rpx;width:100%">
							<image :src="ele" v-for="(ele,idx) in item.photos" :key="idx" style="width: 60rpx;
							height: 60rpx;border-radius: 50%;position: absolute;top: 50%;transform: translateY(-50%);" :style="{ left: 45 * idx + 'rpx', 'zIndex': idx + 1}" />
						</view>

					</view>
				</view>
				<view class="createbox" style="display: flex;justify-content: center;align-items: center;"
					@click="goCreate()">
					<view style="text-align: center;">
						<view style="font-size: 20px;font-weight: 700;">+ 创建群组</view>
						<view style="font-size: 14px;font-weight: 350;">提供适宜群成员的健康膳食推荐服务</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 150px;"></view>
	</view>
</template>

<script>
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				dataList: [],
			}
		},
		onShow() {
			this.getGroupDataList();
		},
		methods: {
			getGroupDataList() {
				this.$H.get("portal/group/searchGroups").then((res => {
					if (res.code == 0) {
						this.dataList = res.data;
					}
				}));
			},
			goDetail(groupId,administrators) {
				uni.navigateTo({
					url: "/pages/my/groupDetail?groupId="+groupId
				});
			},
			goCreate() {
				uni.navigateTo({
					url: "/pages/my/groupCreate"
				});
			},
		},
		async onShareAppMessage(res) {
			if (res.from == "button") {
				let groupId = res.target.dataset.id;
				let data = {
					"Id": groupId
				}
				let res2 = await this.$H.get('portal/group/generateLink', data);
				if (res2.code == 0) {
					let groupToken = res2.data
					return {
						title: "群组邀请",
						path: "/pages/my/groupFenXiang?groupToken=" + groupToken,
						imageUrl: "https://www.chideqiao.com/api/images/myhm-static/share_1.png"
					};
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
.group-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex:1;
	&-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		position: relative;
		&-btn {
			opacity: 0;
			position: absolute;
			left:0 ;
			bottom:0;
			width:100%;
			height:100%;
		}
		&-img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 6rpx;
		}
		&-txt {
			font-size: 16px;
			font-weight: 500;
			color:#1ABC9C
		}
	}
}
	.content {
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.createbox {
		margin-top: 15px;
		height: 80px;
		border-radius: 10px;
		background-color: #1ABC9C;
		color: white;
		font-size: 16px;
		font-weight: 700;
	}
</style>